<template>
  <div class="top-modules-list">
    <el-table :data="topModules" stripe style="width: 100%">
      <el-table-column type="index" label="#" width="50" />
      <el-table-column prop="name" label="模块名称" min-width="120">
        <template #default="{ row }">
          <span class="module-name">{{ row.name }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="deps" label="依赖数" width="80" align="center">
        <template #default="{ row }">
          <el-tag :type="getDepTagType(row.deps)" size="small">
            {{ row.deps || 0 }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="size" label="大小" width="100" align="right">
        <template #default="{ row }">
          {{ formatBytes(row.size) }}
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup>
import { computed } from 'vue'
import { useModulesStore } from '@/stores/modules'
import { formatBytes } from '@/utils/format'

const modulesStore = useModulesStore()

const topModules = computed(() => {
  const dashboard = modulesStore.dashboardData

  // 如果有真实的dashboard数据，使用它
  if (dashboard && dashboard.topModules && dashboard.topModules.length > 0) {
    return dashboard.topModules.map(module => ({
      ...module,
      deps: module.deps || 0
    }))
  }

  // 如果没有真实数据，使用模拟数据
  const modules = modulesStore.modules
  if (modules.length === 0) {
    return [
      { name: 'Foundation', deps: 45, size: 8912896 },
      { name: 'UIKit', deps: 38, size: 12897280 },
      { name: 'CoreFoundation', deps: 32, size: 7130317 },
      { name: 'AppKit', deps: 28, size: 16469811 },
      { name: 'CoreGraphics', deps: 24, size: 6184755 }
    ]
  }

  return modules
    .sort((a, b) => (b.deps || 0) - (a.deps || 0))
    .slice(0, 5)
    .map(module => ({
      ...module,
      deps: module.deps || 0
    }))
})

const getDepTagType = (deps) => {
  if (deps > 20) return 'danger'
  if (deps > 10) return 'warning'
  return 'success'
}
</script>

<style scoped lang="scss">
.top-modules-list {
  height: 100%;

  .module-name {
    font-family: 'Monaco', 'Courier New', monospace;
    font-size: 13px;
    word-break: break-all;
  }

  .el-table {
    :deep(.el-table__row) {
      cursor: pointer;

      &:hover {
        background-color: var(--el-table-row-hover-bg-color);
      }
    }
  }
}
</style>